Time Zone Converter Tutorial

Introduction

A Time Zone Converter is a handy tool that allows users to convert the current time between different time zones. In this tutorial, we will guide you through the steps of building a Time Zone Converter Web Tool using HTML, CSS, and JavaScript.

Step 1: Set Up the HTML Structure

We will first set up the basic HTML structure for the Time Zone Converter. This includes input fields for the user to select time zones and a button to calculate the converted time.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Time Zone Converter</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <label for="fromTime">Enter Time:</label>
        <input type="time" id="fromTime">

        <label for="fromZone">From Time Zone:</label>
        <select id="fromZone">
            <option value="UTC">UTC</option>
            <option value="America/New_York">New York (EST)</option>
            <option value="Asia/Colombo">Sri Lanka (IST)</option>
        </select>

        <label for="toZone">To Time Zone:</label>
        <select id="toZone">
            <option value="UTC">UTC</option>
            <option value="America/New_York">New York (EST)</option>
            <option value="Asia/Colombo">Sri Lanka (IST)</option>
        </select>

        <button id="convertBtn">Convert Time</button>
        <h2>Converted Time: <span id="result"></span></h2>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 2: Styling with CSS

Now, let's style the Time Zone Converter using CSS:


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: #f4f4f9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background: #ffffff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h1 {
    margin-bottom: 20px;
    color: #333;
}

label {
    display: block;
    margin: 10px 0 5px;
    font-weight: bold;
}

input, select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

button {
    padding: 10px 20px;
    background-color: #e85c0d;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 10px;
}

button:hover {
    background-color: #be5316;
}

h2 {
    margin-top: 20px;
    color: #333;
}

Step 3: Adding JavaScript for Time Zone Conversion

Next, let's add the JavaScript to perform the time zone conversion:


document.getElementById('convertBtn').addEventListener('click', function() {
    const fromTime = document.getElementById('fromTime').value;
    const fromZone = document.getElementById('fromZone').value;
    const toZone = document.getElementById('toZone').value;

    if (!fromTime) {
        alert("Please enter a time.");
        return;
    }

    const timeParts = fromTime.split(':');
    const date = new Date();
    date.setHours(timeParts[0], timeParts[1]);

    const fromTimeFormatted = new Intl.DateTimeFormat('en-US', {
        timeZone: fromZone,
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
    }).format(date);

    const toTimeFormatted = new Intl.DateTimeFormat('en-US', {
        timeZone: toZone,
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
    }).format(date);

    document.getElementById('result').textContent = toTimeFormatted;
});